<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!--相对定位
  相对于自己原来的位置进行偏移
  -->
  <style>
    body{
      margin: 20px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px solid red;
      position: relative;
    }
    #first{
      background: #f700ff;
      border: 1px dashed blue;
      position: relative;/*相对定位，上下左右*/
      top: -20px;
      left: 20px;
    }
    #second{
      background: #ff0000;
      border: 1px dashed green;
    }
    #third{
      background: #00ff00;
      border: 1px dashed #f700ff;
      position: absolute;
      top:50px;
      right: 50px;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>